<template>
  <div class="main">
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 20px">个人信息修改</h3>

    <div>
      <el-form style="width: 350px;float: left" ref="form" :model="worker"
               label-width="90px" :rules="rules">
        <el-form-item style="padding: 0" label="用户名" prop="username">
          <el-input v-model="worker.username"></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 12px" label="昵称" prop="nickname">
          <el-input v-model="worker.nickname"></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 12px" label="密码" prop="password">
          <el-input type="password" v-model="worker.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" style="padding-top: 12px">
          <el-select style="width: 200px" v-model="worker.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-top: 12px" label="电话号码" prop="phone" >
          <el-input v-model="worker.phone"></el-input>
        </el-form-item>
        <el-form-item  style="padding-top: 12px; height: 150px;" label="入职部门" prop="department">
<!--          <el-checkbox-group v-model="worker.department">-->
<!--            <el-checkbox label="客服部"></el-checkbox>-->
<!--            <el-checkbox label="运营部"></el-checkbox>-->
<!--            <el-checkbox label="宣传部"></el-checkbox>-->
<!--            <el-checkbox label="策划部"></el-checkbox>-->
<!--            <el-checkbox label="人事部"></el-checkbox>-->
<!--            <el-checkbox label="监管部"></el-checkbox>-->
<!--          </el-checkbox-group>-->
          <el-input v-model="worker.department" disabled></el-input>
        </el-form-item>
        <el-form-item style="padding-top: 0px">
          <el-button type="primary" @click="onSubmit">更新基本信息</el-button>
        </el-form-item>
      </el-form>
      <div>
        <img style="padding-bottom: 10px;padding-left: 150px;width: 150px; height: 150px;" alt=""
             :src="worker.avatar">
        <el-upload
          style="padding-left: 500px;letter-spacing: 1px"
          class="upload-demo"
          accept=".png,.jpg"
          :headers="header"
          :action="uploadAction"
          :on-success="handleUploadSuccess"
          multiple
          :limit="1">
          <el-button style="width: 150px" size="small" type="primary">
            <i class="el-icon-upload2"></i> 点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </div>
    </div>

  </div>
</template>

<script>
  import config from "@/config";
  import {FindWorkerById, UpdateWorker} from "@/api/worker";

  export default {

    data() {
      const isEmpty = (rule, value, callback) => {
        if (value == '') {
          callback(new Error(rule.message))
        } else {
          callback()
        }
      };
      return {
        rules: {
          username: [
            { required: true, message: '用户名不能为空！', trigger: 'blur' },
            { required: true, min:6, message: '请输入不少于六位数的用户名！', trigger: 'blur' },
          ],
          password: [
            { required: true,message: '密码不能为空！', trigger: 'blur' },
            { required: true, min:6, message: '请输入不少于六位数的密码！', trigger: 'blur' },
          ],
          gender: [
            { required: true, message: '性别不能为空！', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '联系电话不能为空！', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "change"
            }
          ],
          url: [
            { validator: isEmpty, message: '请上传电影封面！', trigger: ['blur','change'] }
          ],

        },
        header: {
          "Authorization": localStorage.getItem("token")
        },
        uploadAction: config.API_URL + '/upload',
        worker: {
          nickname: '',
          password: '',
          phone: '',
          gender: '',
          avatar: '',
          department: '',
        },
      }
    },

    mounted() {
      if (localStorage.getItem("role") === 'worker') {
        FindWorkerById(localStorage.getItem("wid")).then(res => {
          this.worker = res.data;
        })
      }
    },

    methods: {

      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            UpdateWorker(this.worker).then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '员工基本信息更新成功!'
                });
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });

      },

      handleUploadSuccess(res) {
        this.worker.avatar = res;
        UpdateWorker(this.worker).then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '头像上传成功!'
            });
          }
        })
      }

    },

  }

</script>

<style scoped>

  .main {
    padding: 20px;
    height: 600px;
  }

  >>> .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .el-form-item {
    margin-bottom: 5px;
  }
</style>
